<template>
  <cjui-page-panel header="Dialog 基础对话框">
    <template #intro>
      弹框采用flex纵向布局，其溢出内容在弹框body内滚动。
    </template>

    <el-button v-for="item in btns" :key="item.value" type="primary" @click="dialogSize = item.value;dialogRef.open()">
      {{ item.label }}
    </el-button>

    <DialogDemo ref="dialogRef" :fullscreen="dialogSize === 'fullscreen'" />
  </cjui-page-panel>
</template>

<script lang="ts" setup>
import DialogDemo from './demo/Dialog.vue'

const btns = [
  { label: 'Default', value: 'default' },
  { label: 'Fullscreen', value: 'fullscreen' },
]

const dialogRef = ref()
const dialogSize = ref('default')
</script>
